<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息可视化平台</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        neutral: '#6B7280'
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .chart-box {
                height: 300px;
                width: 100%;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-xl"></i>
                <h1 class="text-xl font-bold">学生信息可视化</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                数据概览
                学业分析
                基本信息
            </nav>
            <button class="md:hidden text-gray-600">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h2 class="text-2xl md:text-3xl font-bold mb-2">学生数据分析平台</h2>
            <p class="text-gray-500">通过数据可视化直观呈现学生群体各项指标</p >
        </div>

        <!-- 数据概览 -->
        <section id="overview" class="mb-12">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fa fa-dashboard text-primary mr-2"></i>数据概览
            </h3>
            
            <!-- 数据卡片 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p class="text-neutral text-sm">总学生数</p >
                    <p class="text-2xl font-bold mt-1">1,284</p >
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p class="text-neutral text-sm">平均绩点</p >
                    <p class="text-2xl font-bold mt-1">3.24</p >
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p class="text-neutral text-sm">专业数量</p >
                    <p class="text-2xl font-bold mt-1">18</p >
                </div>
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <p class="text-neutral text-sm">男女比例</p >
                    <p class="text-2xl font-bold mt-1">58:42</p >
                </div>
            </div>
        </section>

        <!-- 学业分析 -->
        <section id="academics" class="mb-12">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fa fa-book text-primary mr-2"></i>学业分析
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 成绩分布直方图 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">成绩分布</h4>
                    <div class="chart-box">
                        <canvas id="scoreDistribution"></canvas>
                    </div>
                </div>
                
                <!-- 各专业平均成绩 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">专业平均成绩</h4>
                    <div class="chart-box">
                        <canvas id="majorScores"></canvas>
                    </div>
                </div>
                
                <!-- 挂科率趋势 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">挂科率趋势</h4>
                    <div class="chart-box">
                        <canvas id="failureTrend"></canvas>
                    </div>
                </div>
                
                <!-- 奖学金获得情况 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">奖学金分布</h4>
                    <div class="chart-box">
                        <canvas id="scholarshipChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 基本信息分析 -->
        <section id="demographics" class="mb-12">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fa fa-users text-primary mr-2"></i>基本信息分析
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 性别比例 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">性别比例</h4>
                    <div class="chart-box flex items-center justify-center">
                        <canvas id="genderRatio"></canvas>
                    </div>
                </div>
                
                <!-- 年级分布 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                    <h4 class="font-medium mb-3">年级分布</h4>
                    <div class="chart-box">
                        <canvas id="gradeDistribution"></canvas>
                    </div>
                </div>
                
                <!-- 生源地分布 -->
                <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 md:col-span-2">
                    <h4 class="font-medium mb-3">主要生源地分布</h4>
                    <div class="chart-box">
                        <canvas id="originDistribution"></canvas>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>学生信息可视化平台 &copy; 2023</p >
        </div>
    </footer>

    <!-- 图表初始化脚本 -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 成绩分布直方图
            const scoreCtx = document.getElementById('scoreDistribution').getContext('2d');
            new Chart(scoreCtx, {
                type: 'bar',
                data: {
                    labels: ['0-59', '60-69', '70-79', '80-89', '90-100'],
                    datasets: [{
                        label: '学生数量',
                        data: [42, 156, 389, 421, 276],
                        backgroundColor: '#3B82F6',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // 专业平均成绩
            const majorCtx = document.getElementById('majorScores').getContext('2d');
            new Chart(majorCtx, {
                type: 'bar',
                data: {
                    labels: ['计算机', '电子', '机械', '经管', '文学', '外语'],
                    datasets: [{
                        label: '平均绩点',
                        data: [3.42, 3.28, 3.15, 3.36, 3.52, 3.61],
                        backgroundColor: '#10B981',
                        borderRadius: 4
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: { beginAtZero: true, max: 4 }
                    }
                }
            });

            // 挂科率趋势
            const failureCtx = document.getElementById('failureTrend').getContext('2d');
            new Chart(failureCtx, {
                type: 'line',
                data: {
                    labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
                    datasets: [{
                        label: '挂科率(%)',
                        data: [8.2, 7.5, 9.1, 6.8, 5.9, 5.2],
                        borderColor: '#EF4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });

            // 奖学金分布
            const scholarshipCtx = document.getElementById('scholarshipChart').getContext('2d');
            new Chart(scholarshipCtx, {
                type: 'doughnut',
                data: {
                    labels: ['一等奖', '二等奖', '三等奖', '未获得'],
                    datasets: [{
                        data: [86, 215, 342, 641],
                        backgroundColor: ['#F59E0B', '#3B82F6', '#10B981', '#E5E7EB']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // 性别比例
            const genderCtx = document.getElementById('genderRatio').getContext('2d');
            new Chart(genderCtx, {
                type: 'pie',
                data: {
                    labels: ['男生', '女生'],
                    datasets: [{
                        data: [58, 42],
                        backgroundColor: ['#3B82F6', '#EC4899']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // 年级分布
            const gradeCtx = document.getElementById('gradeDistribution').getContext('2d');
            new Chart(gradeCtx, {
                type: 'polarArea',
                data: {
                    labels: ['大一', '大二', '大三', '大四'],
                    datasets: [{
                        data: [320, 345, 312, 307],
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(139, 92, 246, 0.7)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            // 生源地分布
            const originCtx = document.getElementById('originDistribution').getContext('2d');
            new Chart(originCtx, {
                type: 'bar',
                data: {
                    labels: ['北京', '上海', '广东', '江苏', '浙江', '山东', '河南', '其他'],
                    datasets: [{
                        label: '学生数量',
                        data: [156, 124, 187, 112, 98, 87, 76, 444],
                        backgroundColor: '#3B82F6'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        });
    </script>
</body>
</html>